<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动端事件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            position: relative;
        }
        #box{
            width: 200px;
            height: 200px;
            position: relative;
            left:33px;
            top:33px;
            background: red;
            /*margin: 100px auto;*/
        }
        #box1{
            width: 100px;
            height: 100px;
            position: relative;
            left:33px;
            top:33px;
            background: red;
            margin: 50px auto;
        }
        @-webkit-keyframes sca {
            0%   {transform:scale(1) rotate(90deg);}
            25%  {transform:scale(1.2) rotate(180deg);}
            50%  {transform:scale(0.8) rotate(270deg);}
            75%  {transform:scale(1.2) rotate(330deg);}
            100% {transform:scale(1) rotate(360deg);}
        }
        .sca{
            -webkit-animation: sca 1s 1 linear;
        }
        .baidu{
            line-height: 50px;
            text-align: center;
            font-size: 22px;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="box1">111</div>
    <div class="box2">222</div>
    <div class="box3">333</div>
</div>
<div id="box1"></div>
<script>
    /**
     * querySelector和querySelectorAll
     * querySelector==getElementById
     * querySelectorAll==getElementsByTagName或getElementsByClassName
     * 其中这两个API参数必须符合css selector的字符串
     * cssText不支持驼峰写法
     * 移动端基本事件
     * ontouchstart 手指按下触发
     * ontourchmove 手指移动触发
     * onTouchend   手指抬起触发
     * touches:当前屏幕上的手指列表
     * targetTouches:目标元素上的手指列表
     * changedTouches:出发当前事件的手指列表
     * PC端on-事件
     * 会有覆盖效果
     * 鼠标事件可以在移动端事件使用，但是会有300ms延迟
     * 对于一般的移动端事件
     * 使用addEventListener(event,func,usercapture/bubble)
     * attachEvent解除对事件的绑定
     * 标准事件函数默认的第一个参数
     *
     *
     *
     * 6-作业、阻止默认事件
     a)事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
     b)比如正常情况下，鼠标可以拖拽图片，a标签跳转，手指长按可以选中文字，右键菜单等
     c)e.preventDefault( ) 阻止默认行为，且解决在IOS上有网页回弹的橡皮筋现象
     d)但网页上的所有滚动条失效
     *
     * */
    var oBox=document.querySelector("#box");
    var aBox=document.querySelectorAll(".box1");
    obox1.style.cssText="font-size:22px";
    oBox.addEventListener("touchstart",function (e) {
        oBox.className+="sca tra";
        oBox.style.cssText="background:blue;";
        console.log("start:")
    });
    oBox.addEventListener("touchmove",function (e) {
        console.log("move")
        console.log(e)
    })
    oBox.addEventListener("touchend",function (e) {
        oBox.className="";
        oBox.style.cssText="background:red;";
        console.log("end:"+e)
    })
    //PC drag
    oBox1.onmousedown=function (e) {
        var e= e|| event;
        var x= e.clientX;
        var y= e.clientY;
        document.onmousemove=function (e) {
            var e = e || event;
            oBox1.style.cssText = 'left:'+(e.clientX-x)+'px;top:'+(e.clientY-y)+'px;';
        }
        document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null;
        }
    }
</script>
</body>
</html>